<template>
  <div class="header">
    <!-- Logo -->
    <div class="header-title">
      <i class="header-title__item header-title__ico"></i>
      <span class="header-title__item header-title__text">康远广告数据平台</span>
    </div>

    <!-- 登录信息 -->
    <div class="header-login">
      <span class="header-login__item header-login__text">{{userName}}</span>
      <i
        @click="logout"
        class="header-login__item header-login__ico"
      ></i>
    </div>
  </div>
</template>

<script>
import { sessionStorage, cookieStorage } from "@/util";

export default {
  name: "Header",
  methods: {
    logout() {
      sessionStorage.clearAll();
      cookieStorage.clearAll();
      this.$router.push({ path: "/login" });
    }
  },
  watch: {
    userName(v) {
      this.userNameInfo = v;
    }
  },
  data() {
    return {
      userNameInfo: this.userName
    };
  },
  props: {
    userName: {
      type: String,
      default: sessionStorage.get("Login").nick
    }
  }
};
</script>

<style scoped lang="scss">
.header {
  position: relative;
  height: 80px;
  background: #2c3147;
}

.header-title,
.header-login {
  position: absolute;
}

.header-title {
  left: 40px;
  top: 15px;
  font-size: 24px;
  line-height: 1.5;

  &__item {
    display: inline-block;
    vertical-align: middle;
  }

  &__ico {
    width: 25px;
    height: 24px;
    margin-right: 11px;
    background: url(../assets/common/img/logo.png) 0 0 no-repeat;
  }

  &__text {
    color: #fff;
    font-weight: 700;
  }
}

.header-login {
  top: 15px;
  right: 40px;
  font-size: 16px;
  line-height: 36px;

  &__item {
    display: inline-block;
    vertical-align: middle;
  }

  &__ico {
    width: 18px;
    height: 18px;
    background: url(../assets/header/logout.png) 0 0 no-repeat;
    cursor: pointer;
  }

  &__text {
    color: #fff;
    margin-right: 10px;
  }
}
</style>